import React from 'react';
import { withRouter } from 'react-router';
import { connect } from 'react-redux';
import Pagination from 'rc-pagination';
import Dialog from 'rc-dialog';
// import { bindActionCreators } from 'redux';
// import serverAction from '../../actions/serverActions.js';
import officialChannelAction from '../../actions/officialChannelAction.js';
import Input from '../base/Input.js';
import Checkbox from '../base/Checkbox.js';
import Radio from '../base/RadioGroup.js';
import Widget from '../mui/Widget.js';
import SearchInput from '../mui/searchInput.js';

const PushChannel = withRouter(
  React.createClass({
    getInitialState() {
      return {
        buttonState: false,  // 提交按钮
        contentButton: false, // 中文内容预览按钮状态
        ContentComfirm: true, // 中文内容确认checkbox disable状态
        contentVisible: false, // 中文内容预览弹出框状态
        contentChecked: false, // 中文内容checkbox状态
        contentEnButton: false, // 英文内容预览按钮状态
        contentEnVisible: false, // 英文内容预览弹出框
        contentEnChecked: false,
        contentEnComfirm: true,
        contentjaButton: false, // 日文内容预览按钮状态
        contentjaVisible: false, // 日文内容预览弹出框
        contentjaChecked: false,
        contentjaComfirm: true,
        resData: '',
        pushList: [],
        content: '',
        content_en: '',
        seed_id: '',
        channel_id: this.props.params.id,
        oneChannelData: {}
      };
    },
    componentDidMount() {
      const { getOneChannel, params } = this.props;
      getOneChannel({ channel_id: params.id });
      // const { oneChannelData } = this.state;
      // const data = {
      //   keyword: '',
      //   page: 1,
      //   page_size: 15,
      //   env: 'online',
      //   channel_ver: oneChannelData.ver
      // };
      // fetchPushCategoryList(data);
    },
    componentWillReceiveProps(nextProps) {
      this.setState(
        {
          pushList: nextProps.CategoryList,
          resData: nextProps.pushCategoryList,
          oneChannelData: nextProps.oneChannel.data
        });
    },
    componentWillUnmount() {
      this.props.restorePushCategory();
    },
    handleContent(targetData) {  // 中文更新内容
      this.setState(
        { content: targetData.value,
          ContentComfirm: true,
          contentChecked: false,
          buttonState: false
        }
      );
      if (targetData.value.length < 10) {
        this.setState({ contentButton: false });
      } else {
        this.setState({ contentButton: true });
      }
    },
    handleSpaceCheck(targetData) {
      this.setState({ content: targetData.value });
      if (targetData.value.length < 10) {
        this.setState({ contentButton: false });
      } else {
        this.setState({ contentButton: true });
      }
    },
    handleContentEn(targetData) { // 英文更新内容
      this.setState(
        { content_en: targetData.value,
          contentEnComfirm: true,
          contentEnChecked: false,
          buttonState: false
        }
      );
      if (targetData.value.length < 10) {
        this.setState({ contentEnButton: false });
      } else {
        this.setState({ contentEnButton: true });
      }
    },
    handleContentja(targetData) { // 日文更新内容
      this.setState(
        { content_ja: targetData.value,
          contentjaComfirm: true,
          contentjaChecked: false,
          buttonState: false
        }
      );
      if (targetData.value.length < 10) {
        this.setState({ contentjaButton: false });
      } else {
        this.setState({ contentjaButton: true });
      }
    },
    handleEnSpaceCheck(targetData) {
      this.setState({ content_en: targetData.value });
      if (targetData.value.length < 10) {
        this.setState({ contentEnButton: false });
      } else {
        this.setState({ contentEnButton: true });
      }
    },
    handlejaSpaceCheck(targetData) {
      this.setState({ content_ja: targetData.value });
      if (targetData.value.length < 10) {
        this.setState({ contentjaButton: false });
      } else {
        this.setState({ contentjaButton: true });
      }
    },
    handleContentComfirm(targetData) { // 中文checkbox确认
      this.setState({ contentChecked: targetData.value });
      const { contentEnChecked, contentjaChecked } = this.state; // 判断英文和日文
      if (contentEnChecked && contentjaChecked && targetData.value && this.state.seed_id) {
        this.setState({ buttonState: true });
      } else {
        this.setState({ buttonState: false });
      }
    },
    handleContentEnComfirm(targetData) { // 英文checkbox确认
      this.setState({ contentEnChecked: targetData.value });
      const { contentChecked, contentjaChecked } = this.state; // 判断中文和日文
      if (contentChecked && contentjaChecked && targetData.value && this.state.seed_id) {
        this.setState({ buttonState: true });
      } else {
        this.setState({ buttonState: false });
      }
    },
    handleContentjaComfirm(targetData) { // 日文checkbox确认
      this.setState({ contentjaChecked: targetData.value });
      const { contentChecked, contentEnChecked } = this.state; // 判断中文和日文
      if (contentChecked && contentEnChecked && targetData.value && this.state.seed_id) {
        this.setState({ buttonState: true });
      } else {
        this.setState({ buttonState: false });
      }
    },
    previewContent() { // 预览中文按钮
      this.setState({ contentVisible: true });
    },
    previewContentEn() { // 预览英文按钮
      this.setState({ contentEnVisible: true });
    },
    previewContentja() { // 预览日文按钮
      this.setState({ contentjaVisible: true });
    },
    closeCnDialog() { // 关闭中文预览框
      this.setState({ contentVisible: false, ContentComfirm: false });
    },
    closeEnDialog() { // 关闭英文预览框
      this.setState({ contentEnVisible: false, contentEnComfirm: false });
    },
    closejaDialog() { // 关闭日文预览框
      this.setState({ contentjaVisible: false, contentjaComfirm: false });
    },
    confirmContentPreview() { // 中文弹出框确认
      this.setState({ contentVisible: false, ContentComfirm: false, contentChecked: true });
      const { contentEnChecked, contentjaChecked } = this.state;
      if (contentEnChecked && contentjaChecked && this.state.seed_id) {
        this.setState({ buttonState: true });
      } else {
        this.setState({ buttonState: false });
      }
    },
    confirmContentEnPreview() { // 英文弹出框确认
      this.setState({ contentEnVisible: false, contentEnComfirm: false, contentEnChecked: true });
      const { contentChecked, contentjaChecked } = this.state;
      if (contentChecked && contentjaChecked && this.state.seed_id) {
        this.setState({ buttonState: true });
      } else {
        this.setState({ buttonState: false });
      }
    },
    confirmContentjaPreview() { // 日文弹出框确认
      this.setState({ contentjaVisible: false, contentjaComfirm: false, contentjaChecked: true });
      const { contentChecked, contentEnChecked } = this.state;
      if (contentChecked && contentEnChecked && this.state.seed_id) {
        this.setState({ buttonState: true });
      } else {
        this.setState({ buttonState: false });
      }
    },
    handleSeedId(targetData) {
      const { storageChecked, getPushCategoryAction } = this.props;
      const { contentChecked, contentEnChecked, contentjaChecked, resData } = this.state;
      storageChecked(targetData.value);
      getPushCategoryAction(resData);
      this.setState({ seed_id: targetData.value._id });
      // 必须中，英，日都勾选推送按钮才可用
      if (contentChecked && contentEnChecked && contentjaChecked) {
        this.setState({ buttonState: true });
      } else {
        this.setState({ buttonState: false });
      }
    },
    search(target) {
      const { oneChannelData } = this.state;
      this.searchValue = target.value;
      const data = {
        keyword: target.value,
        page_size: 15,
        env: 'online',
        channel_ver: oneChannelData.ver
      };
      const { fetchPushCategoryList } = this.props;
      fetchPushCategoryList(data);
    },
    pagination(pageNumber) {
      const { oneChannelData } = this.state;
      const data = {
        page: pageNumber,
        page_size: 15,
        keyword: this.searchValue,
        env: 'online',
        channel_ver: oneChannelData.ver
      };
      const { fetchPushCategoryList } = this.props;
      fetchPushCategoryList(data);
    },
    savePushChannel() {
      const data = {};
      data.channel_id = this.state.channel_id;
      data.seed_id = this.state.seed_id;
      data.content = {
        zh: this.state.content,
        en: this.state.content_en,
        ja: this.state.content_ja
      };
      const { pushChannel, router } = this.props;
      pushChannel(data, router);
    },
    render() {
      const { pushList, buttonState, contentButton,
              contentEnButton, ContentComfirm, contentChecked,
              contentEnComfirm, contentEnChecked, oneChannelData,
              contentjaButton, contentjaComfirm, contentjaChecked
            } = this.state;
      const { pushCategoryList } = this.props;
      const button = <button className="btn btn-primary" onClick={this.savePushChannel}>发布至此渠道</button>;
      const disableButton = <button className="btn btn-disable" disabled="disabled">发布至此渠道</button>;
      let contentDialog, contentEnDialog, contentjaDialog;
      if (this.state.contentVisible) {
        contentDialog = (
          <Dialog
            visible={this.state.contentVisible}
            prefixCls={'preview-cn-dialog'}
            animation="slide-fade"
            maskAnimation="fade"
            // onClose={this.cancelReturn}
            style={{ width: 990, height: 768 }}
            // title={<div>第二个弹框</div>}
            footer={
            [
              <button type="button" className="btn btn-primary mr60" key="close" onClick={this.confirmContentPreview} >
                确定
              </button>,
              <button type="button" className="btn btn-cancel" key="save" onClick={this.closeCnDialog} >
                取消
              </button>,
            ]
            }
          >
            <div className="preiew-cn-dialog-content">
              <Widget widgetHeader={'预览'} closeLogo={this.closeCnDialog} />
              <div className="relative">
                <img className="preiew-background" src="/static/dist-static/img/ui_app_handle13.png" alt="" />
                <div className="preiew-update-content">
                  <pre>{this.state.content}</pre>
                </div>
              </div>
            </div>
          </Dialog>
        );
      }
      if (this.state.contentEnVisible) {
        contentEnDialog = (
          <Dialog
            visible={this.state.contentEnVisible}
            prefixCls={'preview-en-dialog'}
            animation="slide-fade"
            maskAnimation="fade"
            // onClose={this.cancelReturn}
            style={{ width: 990, height: 768 }}
            // title={<div>第二个弹框</div>}
            footer={
            [
              <button type="button" className="btn btn-primary mr60" key="close" onClick={this.confirmContentEnPreview} >
                确定
              </button>,
              <button type="button" className="btn btn-cancel" key="save" onClick={this.closeEnDialog} >
                取消
              </button>,
            ]
            }
          >
            <div className="preiew-en-dialog-content">
              <Widget widgetHeader={'预览'} closeLogo={this.closeEnDialog} />
              <div className="relative">
                <img className="preiew-background" src="/static/dist-static/img/ui_app_handle13.png" alt="" />
                <div className="preiew-update-content">
                  <pre>{this.state.content_en}</pre>
                </div>
              </div>
            </div>
          </Dialog>
        );
      }
      if (this.state.contentjaVisible) {
        contentjaDialog = (
          <Dialog
            visible={this.state.contentjaVisible}
            prefixCls={'preview-en-dialog'}
            animation="slide-fade"
            maskAnimation="fade"
            // onClose={this.cancelReturn}
            style={{ width: 990, height: 768 }}
            // title={<div>第二个弹框</div>}
            footer={
            [
              <button type="button" className="btn btn-primary mr60" key="close" onClick={this.confirmContentjaPreview} >
                确定
              </button>,
              <button type="button" className="btn btn-cancel" key="save" onClick={this.closejaDialog} >
                取消
              </button>,
            ]
            }
          >
            <div className="preiew-en-dialog-content">
              <Widget widgetHeader={'预览'} closeLogo={this.closejaDialog} />
              <div className="relative">
                <img className="preiew-background" src="/static/dist-static/img/ui_app_handle13.png" alt="" />
                <div className="preiew-update-content">
                  <pre>{this.state.content_ja}</pre>
                </div>
              </div>
            </div>
          </Dialog>
        );
      }
      return (
        <div>
          <Widget widgetHeader={'正式渠道'} widgetHeaderTwo={'发布至此渠道'} />
          <div className="widget-body mw900">
            <div className="title-button-group">
              <span className="btn btn-message">
                <span className="max-font" title={oneChannelData && oneChannelData.name}>{oneChannelData && oneChannelData.name}</span>
              </span>
              {buttonState ? button : disableButton}
            </div>
            <div className="form-group">
              <label className="control-label w113" htmlFor="version">更新内容</label>
              <div className="input-group w560">
                <Input
                  data-target="content"
                  type="textarea"
                  onChange={this.handleContent}
                  onBlur={this.handleSpaceCheck}
                  value={this.state.content}
                  placeholder="最少10个字符"
                  rows={'4'}
                />
              </div>
              <div className={ContentComfirm ? 'send-form checkbox-disable' : 'send-form'}>
                <Checkbox
                  onChange={this.handleContentComfirm}
                  label={'确认'}
                  labeStyle={'color-7979'}
                  disabled={ContentComfirm}
                  checked={contentChecked}
                  data-target="contentComfirm"
                />
                {contentButton ?
                  <button className="btn btn-preview" onClick={this.previewContent} > 预览 </button>
                  :
                  <button className="btn btn-preview-disable" disabled="disabled" > 预览 </button>
                }
              </div>
            </div>

            <div className="form-group">
              <label className="control-label w113" htmlFor="version">Update Content</label>
              <div className="input-group w560">
                <Input
                  data-target="content_en"
                  type="textarea"
                  onChange={this.handleContentEn}
                  onBlur={this.handleEnSpaceCheck}
                  value={this.state.content_en}
                  placeholder="最少10个字符"
                  rows={'4'}
                />
              </div>
              <div className={contentEnComfirm ? 'send-form checkbox-disable' : 'send-form'}>
                <Checkbox
                  onChange={this.handleContentEnComfirm}
                  label={'确认'}
                  labeStyle={'color-7979'}
                  disabled={contentEnComfirm}
                  checked={contentEnChecked}
                  data-target="contentEnComfirm"
                />
                {contentEnButton ?
                  <button className="btn btn-preview" onClick={this.previewContentEn} > 预览 </button>
                  :
                  <button className="btn btn-preview-disable" disabled="disabled" > 预览 </button>
                }
              </div>
            </div>

            <div className="form-group push-name-input">
              <label className="control-label w113" htmlFor="version">日文</label>
              <div className="input-group w560">
                <Input
                  data-target="content_en"
                  type="textarea"
                  onChange={this.handleContentja}
                  onBlur={this.handlejaSpaceCheck}
                  value={this.state.content_ja}
                  placeholder="最少10个字符"
                  rows={'4'}
                />
              </div>
              <div className={contentjaComfirm ? 'send-form checkbox-disable' : 'send-form'}>
                <Checkbox
                  onChange={this.handleContentjaComfirm}
                  label={'确认'}
                  labeStyle={'color-7979'}
                  disabled={contentjaComfirm}
                  checked={contentjaChecked}
                  data-target="contentEnComfirm"
                />
                {contentjaButton ?
                  <button className="btn btn-preview" onClick={this.previewContentja} > 预览 </button>
                  :
                  <button className="btn btn-preview-disable" disabled="disabled" > 预览 </button>
                }
              </div>
            </div>

            <SearchInput placeholder={"包命名"} onSearch={this.search} className={'search-category mb20'} />
            <Widget widgetHeader={'选择测试包'} />
            <table className="table table-hover">
              <thead>
                <tr>
                  <th className="mw90">操作</th>
                  <th className="mw490">包命名</th>
                  <th className="mw490">备注</th>
                </tr>
              </thead>
              <tbody>
                  {
                    pushList.map((item, index) =>
                      <tr key={item._id} className={item.checked ? 'bg-color-f6' : ''}>
                        <td>
                          <Radio
                            name={'seed_id'}
                            data-value={item}
                            onClick={this.handleSeedId}
                            data-target={'seed_id'}
                            defaultChecked={item.checked}
                          />
                        </td>
                        <td>{item.name}</td>
                        <td className="text-left">{item.remark}</td>
                      </tr>
                    )
                  }
              </tbody>
            </table>
            <div className="push-pagination">
              <Pagination
                className="ant-pagination"
                defaultCurrent={1}
                current={pushCategoryList.page}
                total={pushCategoryList.pages ? pushCategoryList.pages * 10 : 0}
                onChange={this.pagination}
              />
            </div>
          </div>
          {contentDialog}
          {contentEnDialog}
          {contentjaDialog}
        </div>
      );
    }
  })
);

const mapStateToProps = function (state) {
  return {
    pushCategoryList: state.pushCategory.pushCategoryList,
    CategoryList: state.pushCategory.CategoryList,
    checkedItem: state.pushCategory.checkedItem,
    oneChannel: state.officialChannel.oneChannel
    // saveMsg: state.pushCategory.saveMsg
  };
};

// const mapDispatchToProps = function (dispatch) {
//   return bindActionCreators(Object.assign({}, serverAction, officialChannelAction))
// };
// console.log(mapDispatchToProps())
module.exports = connect(mapStateToProps, officialChannelAction)(PushChannel);
